<!-- 讨论区 采用ws -->
<script lang='ts' setup>
import emojiJson from '@/hooks/emoji.json';
import { axiosRequests } from "../../hooks/axiosRequest"
import { ref } from 'vue'
import chat from '../icons/chatFrame.vue'
import ws from '../../hooks/ws'
import { ElMessage } from 'element-plus'
import { discussStore } from '../../stores/discuss'
import { userInfoStore } from '../../stores/userInfo'
const userInfo = userInfoStore()
const discuss = discussStore()
//评论信息
const props = defineProps({
    beloneTo: {
        type: Number,
    }
})
console.log("评论信息", props.beloneTo);

let emoji = emojiJson.data.split(',');
const { userpost, userget } = axiosRequests()

//开启ws服务
const wss = new ws()
wss.createWs()
//用户填写的内容
const discussContent = ref('')
//点击显示回复区域 并改变位置
//展开回复框
const isReply = ref(false)
//获取子组件的 传来的参数
let replyUser: any = null//获取被回复者信息
const replyEven = (val: { isshow: boolean; userinfo: object }) => {

    replyUser = val.userinfo
    console.log("wwww", replyUser);
    isReply.value = val.isshow
}
//将获取的Emoji表情拼接到discussContent中
function chooseEmoji(val: string) {
    discussContent.value = discussContent.value + val
}
//将内容发布出去
async function discussPublic() {
    let str = discussContent.value.replace(/\s+/ig, " ");
    if (str === ' ' || str.length === 0) {
        return console.log(123);
    }
    if (isReply.value) {
        console.log("这是回复", userInfo.userInfo)
        //回复
        if (replyUser === null) {
            return
        }
        const result = await userpost('/discuss/reply', { beloneTo: props.beloneTo, content: discussContent.value, replyNickname: replyUser.nickname, replyEmail: replyUser.email, replyFiles: replyUser.files, lock: replyUser.lock })
        if (result.status === 0) {
            wss.send({ flag: 'reply', data: result.data })
        } else {
            alert(result.data)
        }
    } else {
        //评论
        console.log("这是评论", userInfo.userInfo)
        const result = await userpost('/discuss/discuss', { beloneTo: props.beloneTo, content: discussContent.value })
        if (result.status === 0) {
            wss.send({ flag: 'comment', data: result.data })
        } else {
            alert(result.data)

        }
    }
}
//初始化评论数据
initDiscuss()
async function initDiscuss() {
    const result = await userget('/email/discuss/getdiscuss?beloneTo= ' + props.beloneTo, {})
    if (result.status === 0) {
        console.log('获取的评论：', result.data)
        discuss.initComment(result.data)
        discuss.initRepltComment(result.replyData)
    } else {
        alert(result.data)
    }
}
</script>
<template>
    <div id="disBox">
        <div v-if="!discuss.comment.length">
            <el-empty :image-size="200" />
        </div>
        <!-- 讨论列表 此处可拆分为组件 用穿透来修改样式 deep 或其他方法-->
        <div class="showContent scrollStyle">
            <div v-for="users in discuss.comment">
                <chat :users="users" @replyEven="replyEven">
                    <span style="font-size:16px;color: black;">{{ users.nickname }}</span>
                </chat>
                <!-- 回复列表 -->
                <div v-for="replys in discuss.repltComment">
                    <div v-if="replys.lock === users.lock">
                        <div style="color: black; margin-left: 30px; margin-top:20px ;">
                            <chat @replyEven="replyEven" :users="replys" :buttonSize="true">
                                <span style="font-size:16px;color: black;">{{ replys.nickname }} 回复:{{
                                        replys.replyNickname
                                }}</span>
                            </chat>
                        </div>
                    </div>
                </div>
                <hr style="margin: 20px 0; border-color: rgba(0, 0, 0, .1);">
            </div>
        </div>
        <!--   编辑框 -->
        <div class="disEditor">
            <p style="margin-left: 20px; margin-bottom: 5px; color:gray; font-size: 15px;" v-show="isReply">
                <span>回复:</span><span
                    style="display: inline-block; vertical-align: -5px; width: 150px;overflow: hidden;text-overflow:ellipsis; "
                    id="nickname">nickname</span>
                <span style="float:right ; margin-right: 20px;cursor: pointer;color: red;"
                    @click="isReply = false">取消回复</span>
            </p>
            <textarea id="disEditor" class="textarea scrollStyle" v-model="discussContent"
                contenteditable="true"></textarea>
            <div style="display:flex;justify-content: space-between; align-items: center; margin-bottom: 5px;">
                <span style="font-size:14px;color: gray;">还能输入100个字符</span>
                <div style="display:flex; align-items: center;">
                    <el-popover :width="400" trigger="click">
                        <template #reference>
                            <span style="margin-right: 15px; margin-top:-5px;font-size:35px; cursor: pointer;">
                                &#128512;</span>
                        </template>
                        <div class="scrollStyle" style="height:400px; overflow: auto;">
                            <ul class="emojiGroup">
                                <li style="cursor: pointer;" v-for="item in emoji" @click.stop="chooseEmoji(item)">{{
                                        item
                                }}</li>
                            </ul>
                        </div>
                    </el-popover>
                    <el-button type="success" round @click="discussPublic">发布</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
#disBox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;

    .showContent {
        flex: 1;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        overflow: auto;
        color: black;
    }

    .disEditor {
        width: 90%;
        height: 175px;
        border-radius: 10px;
        padding: 15px;
        margin-left: 20px;
        margin-top: 20px;
        background-color: rgba(241, 235, 236, 0.973);

        .textarea {
            width: 100%;
            border: 0;
            height: 80px;
            outline: none;
            resize: none;
            font-size: 16px;
            line-height: 25px;
            letter-spacing: 2.6px;
            font-family: "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: transparent;
        }
    }
}

.emojiGroup {
    display: flex;
    flex-wrap: wrap;
    font-size: 20px;
}
</style>
